#!/bin/bash

# ================================================================
# 首页验证脚本
# 快速检查首页是否正常工作
# ================================================================

GREEN='\033[0;32m'
YELLOW='\033[1;33m'
RED='\033[0;31m'
BLUE='\033[0;34m'
NC='\033[0m'

echo "================================================================"
echo "              首页快速验证工具"
echo "================================================================"
echo ""

PROJECT_DIR="/Users/kevin/项目文件夹/交易平台/newsite/trading-center-front"

# 1. 检查首页文件
echo "----------------------------------------------------------------"
echo "第1步：检查首页文件"
echo "----------------------------------------------------------------"

if [ -f "$PROJECT_DIR/pages/index.vue" ]; then
    echo -e "${GREEN}✓${NC} pages/index.vue 存在"
    if grep -q "CategoryMenu" "$PROJECT_DIR/pages/index.vue"; then
        echo -e "${GREEN}✓${NC} 包含三栏布局 (CategoryMenu)"
    else
        echo -e "${YELLOW}⚠${NC} 未检测到三栏布局"
    fi
else
    echo -e "${RED}✗${NC} pages/index.vue 不存在"
fi

if [ -f "$PROJECT_DIR/pages/home/index.vue" ]; then
    echo -e "${GREEN}✓${NC} pages/home/index.vue 存在"
else
    echo -e "${RED}✗${NC} pages/home/index.vue 不存在"
fi

echo ""

# 2. 检查必需组件
echo "----------------------------------------------------------------"
echo "第2步：检查关键组件"
echo "----------------------------------------------------------------"

CRITICAL_COMPONENTS=(
    "AppHeader.vue"
    "AppMainNav.vue"
    "AppFooter.vue"
    "FloatingMenu.vue"
    "CategoryMenu.vue"
    "HomeBanner.vue"
    "NoticePanel.vue"
)

MISSING=0
for comp in "${CRITICAL_COMPONENTS[@]}"; do
    if [ -f "$PROJECT_DIR/components/$comp" ]; then
        echo -e "${GREEN}✓${NC} $comp"
    else
        echo -e "${RED}✗${NC} $comp ${RED}缺失${NC}"
        MISSING=$((MISSING + 1))
    fi
done

echo ""

# 3. 检查配置
echo "----------------------------------------------------------------"
echo "第3步：检查配置"
echo "----------------------------------------------------------------"

if grep -q "useScreenAdaptation" "$PROJECT_DIR/pages/index.vue" 2>/dev/null; then
    echo -e "${GREEN}✓${NC} 屏幕适配已启用"
else
    echo -e "${YELLOW}⚠${NC} 屏幕适配未检测到"
fi

if grep -q "@include container-width" "$PROJECT_DIR/pages/index.vue" 2>/dev/null; then
    echo -e "${GREEN}✓${NC} SCSS mixins 正在使用"
else
    echo -e "${YELLOW}⚠${NC} SCSS mixins 未检测到使用"
fi

echo ""

# 4. 检查服务
echo "----------------------------------------------------------------"
echo "第4步：检查服务状态"
echo "----------------------------------------------------------------"

# 检查后端
if curl -s http://localhost:8081/api/front/index/info > /dev/null 2>&1; then
    echo -e "${GREEN}✓${NC} 后端服务运行中 (8081)"
else
    echo -e "${RED}✗${NC} 后端服务未响应"
    echo -e "  ${YELLOW}启动命令:${NC} ./启动后端服务.sh"
fi

# 检查前端 (可能还未启动)
if curl -s http://localhost:3000 > /dev/null 2>&1; then
    echo -e "${GREEN}✓${NC} 前端服务运行中 (3000)"
else
    echo -e "${YELLOW}⚠${NC} 前端服务未检测到"
    echo -e "  ${YELLOW}启动命令:${NC} cd $PROJECT_DIR && npm run dev"
fi

echo ""

# 5. 生成测试清单
echo "================================================================"
echo "                    验证总结"
echo "================================================================"
echo ""

if [ $MISSING -eq 0 ]; then
    echo -e "${GREEN}✅ 所有关键组件已就位${NC}"
else
    echo -e "${RED}❌ 缺失 $MISSING 个关键组件${NC}"
fi

echo ""
echo "================================================================"
echo "                    手动测试清单"
echo "================================================================"
echo ""
echo "请手动测试以下功能："
echo ""
echo "1. 访问首页"
echo "   URL: http://localhost:3000"
echo "   URL: http://localhost:3000/home"
echo ""
echo "2. 检查布局"
echo "   □ 左侧分类菜单是否显示"
echo "   □ 中间轮播图是否正常"
echo "   □ 右侧公告面板是否显示"
echo ""
echo "3. 检查组件"
echo "   □ 产品分类轮播"
echo "   □ 热门产品"
echo "   □ 土产专区"
echo "   □ 出口热卖"
echo "   □ 昌欣集市"
echo "   □ 工厂直收"
echo "   □ 找货专区"
echo ""
echo "4. 检查功能"
echo "   □ 分类菜单可以展开"
echo "   □ 轮播图自动播放"
echo "   □ 产品卡片可以点击"
echo "   □ 悬浮菜单显示在右侧"
echo ""
echo "5. 检查响应式"
echo "   □ 缩小浏览器窗口测试"
echo "   □ 检查平板断点 (768-1024px)"
echo "   □ 检查手机断点 (<768px)"
echo ""
echo "================================================================"
echo ""

# 生成快速启动脚本
cat > "$PROJECT_DIR/../说明:脚本/快速启动前端.sh" << 'SCRIPT_EOF'
#!/bin/bash

cd "/Users/kevin/项目文件夹/交易平台/newsite/trading-center-front"

echo "================================"
echo "启动前端开发服务器"
echo "================================"
echo ""
echo "访问地址："
echo "  首页: http://localhost:3000"
echo "  首页: http://localhost:3000/home"
echo ""
echo "按 Ctrl+C 停止服务"
echo ""

npm run dev
SCRIPT_EOF

chmod +x "$PROJECT_DIR/../说明:脚本/快速启动前端.sh"

echo -e "${BLUE}提示:${NC}"
echo "  快速启动脚本已创建: 快速启动前端.sh"
echo "  运行: ./快速启动前端.sh"
echo ""

